<template>
  <el-dialog title="导出" v-model="show" width="40%">
    <div>
      <json-viewer
        :value="config"
        boxed
        sort
        :copyable="{
          copyText: '复制JSON',
          copiedText: '已复制',
          timeout: 1000,
        }"
        theme="dark"
        @onKeyClick="keyClick"
      ></json-viewer>
    </div>
  </el-dialog>
</template>

<script lang="ts">
import { JsonViewer } from "vue3-json-viewer";
import { defineComponent, reactive, ref, inject } from "vue";
import "vue3-json-viewer/dist/index.css";
export default defineComponent({
  components: {
    JsonViewer,
  },
  setup() {
    const content:any = inject('content');
    const show = ref(false);
    let config: any = ref({});

    const initFields = (obj: any, fields: any) => {
      let { property, label, type, child, value, data, options } = obj;
      let target:any = (fields[property] = ['object', 'array'].includes(type)
        ? { label, type }
        : { label, type, value }
      );
      data && (target.data = data)
      options && (target.options = options)
      if (child) {
        target.child = {}
        child.map((c: any) => initFields(c, target.child))
      }
    };
    const init = () => {
      config.value = {
        label: content.model.label,
        icon: content.model.icon,
        fields: {}
      };
      if (content.model.componentList.length > 0) {
        content.model.componentList.map((item: any) => {
          initFields(item, config.value.fields)
        });
      }
    };

    const open = () => {
      show.value = true;
      init();
    };
    const keyClick = (keyName: any) => {
      console.log(keyName, "被点击了");
    };

    return {
      show,
      keyClick,
      config,
      open,
    };
  },
});
</script>
